﻿@{
    ViewBag.Title = "Product Types";
}

<div class="first">
    <div class="second">

        <table id="marbleTable" class="table">
            <thead>
                <th>ID</th>
                <th>Edit</th>
                <th>Type</th>
                <th>Description</th>
                <th>ReportGroup</th>
                <th>CardSale</th>
                <th>Active</th>
                <th>LastUpdatedBy</th>
                <th>LastUpdatedDate</th>
            </thead>
            @foreach (var item in ViewBag.productTypes)
            {  
                <tr onchange="UpdatedList(this)">
                    <td>@item.Id  </td>
                    <td>
                        <button onClick="EditProductType(@item.Id)">-</button>
                    </td>
                    <td>
                        <input type="text" value="@item.Type" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="@item.Description" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="@item.ReportGroup" class="gridText" />
                    </td>
                    <td>
                        <input type="checkbox"  @(item.Active ? "checked='checked'" : "") value="@item.Active" />
                    </td>
                    <td>
                        <input type="checkbox"  @(item.CardSale ? "checked='checked'" : "") value="@item.CardSale" />
                    </td>
                    <td>
                        <input type="text" value="@item.LastUpdatedBy" class="gridText" disabled/>
                    </td>
                    <td>
                        <input type="text" value="@item.LastUpdatedDate" class="gridText" disabled/>
                    </td>
                </tr>  
            }
        </table>
    </div>
</div>
<div class="action">
    <button class="btn btn-primary btn-md" role="button" onclick="SaveProductTypes()">Save</button>
    <a href="#" class="btn btn-primary btn-md" role="button" onclick="AddProductType()">Add Product Type</a>
</div>
<script>
    function AddProductType() {

        var newRow = '<tr onchange=UpdatedList(this)> <td> <a href="#"></a> </td>  <td>  </td>' +
        '<td> <input type="text" value="" class="gridText"/>  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="checkbox" />  </td>' +
        '<td> <input type="checkbox" />  </td>' +
        '<td> <input type="text" value="" class="gridText" disabled/>  </td>' +
        '<td> <input type="text" value="" class="gridText" disabled/>  </td>' + '</tr>';
        $('#productsTable tr:last').after(newRow);
    }
    function SaveProductTypes() {
        var productTypes = [];
        var table = document.getElementById('productsTable');
        for (var r = 1, n = table.rows.length; r < n; r++) {
            if (updatedArray.includes(r)) {
                productTypes.push({
                    Id: table.rows[r].cells[0].innerHTML,
                    Type: table.rows[r].cells[2].children[0].value,
                    Description: table.rows[r].cells[3].children[0].value,
                    ReportGroup: table.rows[r].cells[4].children[0].value,
                    Active: table.rows[r].cells[5].children[0].checked,
                    CardSale: table.rows[r].cells[6].children[0].checked
                });
            }
        }
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("UpdateProductType", "Product")',
            data: JSON.stringify({ productTypes: productTypes }),
            dataType: "json",
            success: function (data) {
                alert('Data Saved');
                location.reload();
            },
            error: function (e) {
                alert(e);
            }
        });
    }
    var updatedArray = [];
    function UpdatedList(x) {
        if (!updatedArray.includes(x.rowIndex)) {
            updatedArray.push(x.rowIndex);
        }
    }
    function EditProductType(id) {
        window.open("/product/GetProduct/" + id, "Marbale", "width=700,height=700");
    }
</script>





